MyApp.common.login.onReady(function () {
  // In normal cases it's better to have the template as a script tag in an html file (it's easier to edit), but since this is on every page I put it here so the html fragment doesn't have to be included on every page, to minimize the html file size
  var tpl = new Ext.XTemplate(
    '<tpl if="!loginPage">\n',
    '  <div id="header-menu">\n',
    '    <tpl if="loggedIn">\n',
    '      Logged in: <b>{displayName} ({userName})</b>\n',
    '      <a href="">Account settings</a> |\n',
    '      <a href="javascript:MyApp.in_page.logout.logout()">Logout</a>\n',
    '\n',
    '      <br>\n',
    '\n',
    '      <a href="{htmlPath}/list-rows/list-rows.html">Manage rows</a> |\n',
    '      <a href="">Some</a> |\n',
    '      <a href="">Other</a> |\n',
    '      <a href="">Menu</a> |\n',
    '      <a href="">Items</a>\n',
    '    </tpl>\n',
    '    <tpl if="!loggedIn">\n',
    '      <a href="{htmlPath}/login/login.html">Log in</a>\n',
    '    </tpl>\n',
    '  </div>\n',
    '</tpl>\n'
  );
  
  var loginPage = false;

  if(MyApp.common.login.getLoginData().loggedIn) {
    if(document.location.href.indexOf('/login/login.html') >= 0 ||
       document.location.href.indexOf('/in-page/logout/logout-confirmation.html') >= 0) {
      document.location.replace(htmlPath + '/list-rows/list-rows.html');
    }
  } else {
    if(document.location.href.indexOf('/login/login.html') >= 0) {
      loginPage = true;
    }
  }
  
  var loginData;
  
  {
    var actualConfig = {};
    Ext.apply(actualConfig, MyApp.common.login.getLoginData(), {
      loginPage: loginPage,
      htmlPath: htmlPath
    });

    loginData = actualConfig;
  }

  tpl.overwrite("header-menu-div", loginData);
});
